<script lang="ts">
import { computedAsync } from '@peng_kai/kit/libs/vueuse';
import { getGameInfo } from '~/pages/play/helpers';
import SelfDetail from './Self.v2.vue';
import ThirdPartyDetail from './ThirdParty.vue';

export const gameRecordDetailPopup = useAntdModal({
  // eslint-disable-next-line import/no-self-import
  is: defineAsyncComponent(() => import('./index.vue')),
  type: 'modal',
}, {
  wrapClassName: 'ant-cover__Modal-drawer',
  centered: true,
  // async opener() {
  //   const hashParams = parseModalParams<{
  //     gameCode: string;
  //     orderNo: string;
  //   }>('gameRecordDetail');

  //   await sleep(1000);

  //   if (hashParams?.gameCode && hashParams?.orderNo) {
  //     gameRecordDetailPopup.open({
  //       gameCode: hashParams.gameCode,
  //       orderNo: hashParams.orderNo,
  //     });
  //   }
  // },
  // onCancel() {
  // },
});
</script>

<script setup lang="ts">
const props = defineProps<{
  gameCode: string;
  orderNo: string;
}>();
const emits = defineEmits<{
  close: [];
}>();

const game = computedAsync(() => getGameInfo(props.gameCode));
const DetailComponent = computed(() => game.value
  ? game.value.self
    ? markRaw(SelfDetail)
    : markRaw(ThirdPartyDetail)
  : null,
);
</script>

<template>
  <component
    :is="DetailComponent" :key="props.orderNo"
    v-bind="props" class="pointer-events-auto h-$dfvh max-h-200 rounded-3 lt-mobile:rounded-b-none"
    @close="emits('close')"
  />
</template>
